<!--
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->

<!-- Measures Summary -->
<div ng-controller="CubeMeasuresCtrl">
  <ng-form name="forms.cube_measure_form">
      <div class="dataTables_wrapper form-inline no-footer" ng-if="cubeMetaFrame.measures.length > 0">
              <table class="table table-striped table-hover">
                  <thead>
                      <tr>
                          <th>Name</th>
                          <th>Expression</th>
                          <th>Parameters</th>
                          <th>Return Type</th>
                          <th ng-if="state.mode=='edit'">Actions</th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr ng-repeat="measure in cubeMetaFrame.measures | filter: state.measureFilter track by $index">
                          <td>
                              <!--Name -->
                              <span tooltip="measure name..">{{measure.name}}</span>
                          </td>
                          <td>
                              <!--Expression -->
                              <span>{{measure.function.expression}}</span>
                          </td>
                          <td>
                            <div class="paraTree">
                              <ul>
                                <parametertree ng-if="measure.function.parameter!=null && measure.function.expression!=='TOP_N'" nextpara="measure.function.parameter"></parametertree>
                                <topntree ng-if="measure.function.parameter!=null && measure.function.expression=='TOP_N'" nextpara="measure.function.parameter"></topntree>
                              </ul>
                            </div>
                        <!--<span ng-if="measure.function.parameter.next_parameter!=null">{{measure.function.parameter.next_parameter |json}}</span>-->
                          </td>
                          <td>
                              <!--Return Type -->
                              <span>{{measure.function.returntype}}</span>
                          </td>
                          <td ng-if="state.mode=='edit'">
                              <!--Edit Button -->
                              <button class="btn btn-xs btn-info" ng-click="addNewMeasure(measure)">
                                  <i class="fa fa-pencil"></i>
                              </button>
                              <!--Remove Button -->
                              <button class="btn btn-xs  btn-danger" ng-click="removeElement(cubeMetaFrame.measures, measure)">
                                  <i class="fa fa-trash-o"></i>
                              </button>
                          </td>
                      </tr>
                  </tbody>
              </table>
      </div>
  </ng-form>

  <!--Add Measures Button-->
  <div class="form-group">
      <button class="btn btn-sm btn-info" ng-click="addNewMeasure()" ng-show="state.mode=='edit' && !newMeasure">
          <i class="fa fa-plus"></i> Measure
      </button>
  </div>

  <!--Edit Measure-->
  <ng-form name="edit_mes_form">
  <div class="box box-solid" ng-if="newMeasure">
      <div class="box-header">
          <h4 class="box-title text-info">Edit Measure</h4>
      </div>
      <div class="box-body">
          <div class="row">
              <div class="col-xs-8">
                      <!--Name-->
                      <div class="form-group">
                          <div class="row">
                              <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Name</b></label>
                              <div class="col-xs-12 col-sm-6">
                                  <input type="text" placeholder="Name.." class="form-control"
                                      tooltip="measure name.." tooltip-trigger="focus"
                                      ng-model="newMeasure.name" required />
                              </div>
                          </div>
                      </div>
                      <!--Expression-->
                      <div class="form-group middle-popover">
                          <div class="row">
                              <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Expression</b>  <i class="fa fa-info-circle" kylinpopover placement="right" title="Expression" template="expressionTip.html"></i></label>
                              <div class="col-xs-12 col-sm-6">
                                  <select class="form-control"
                                      ng-init="newMeasure.function.expression = (!!newMeasure.function.expression)?newMeasure.function.expression:cubeConfig.dftSelections.measureExpression" chosen ng-model="newMeasure.function.expression" required
                                      ng-change="measureReturnTypeUpdate();"
                                      ng-options="me as me for me in cubeConfig.measureExpressions">
                                      <option value=""></option>
                                  </select>
                              </div>
                          </div>
                      </div>
                      <!--Param Type-->
                      <div class="form-group">
                          <div class="row">
                              <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Param Type</b></label>
                              <div class="col-xs-12 col-sm-6">
                                  <select class="form-control" ng-if="newMeasure.function.expression != 'COUNT'"
                                      ng-init="newMeasure.function.parameter.type=(!!newMeasure.function.parameter.type)?newMeasure.function.parameter.type: 'column' "
                                      chosen ng-model="newMeasure.function.parameter.type" required
                                      ng-change="measureReturnTypeUpdate();"
                                      ng-options="mpt as mpt for mpt in cubeConfig.measureParamType">
                                      <option value=""></option>
                                  </select>
                                  <span class="font-color-default"
                                         ng-if="newMeasure.function.expression == 'COUNT'"
                                         ng-init="newMeasure.function.parameter.type= 'constant' "><b>&nbsp;&nbsp;constant</b>
                                  </span>
                              </div>
                          </div>
                      </div>
                      <!--Param Value-->
                      <div class="form-group middle-popover">
                          <div class="row">
                              <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default">
                                <b>Param Value</b>  <i class="fa fa-info-circle" kylinpopover placement="right" title="Param Value" template="paramvalueTip.html"></i>
                                <!--tip for top_n-->
                                <small ng-if="newMeasure.function.expression == 'TOP_N'" class="help-block" style="color:#3a87ad">(SUM|ORDER BY Column for TOP_N)</small>
                              </label>



                              <div class="col-xs-12 col-sm-6">
                                  <span class="font-color-default"
                                      ng-if="newMeasure.function.parameter.type == 'constant'"
                                      ng-init="newMeasure.function.parameter.value = 1"><b>&nbsp;&nbsp;1</b></span>
                                <!--!COUNT_DISTINCT-->
                                <select class="form-control" chosen
                                        ng-if="newMeasure.function.parameter.type == 'column'"
                                        ng-model="newMeasure.function.parameter.value"
                                        ng-change="measureReturnTypeUpdate();"
                                        ng-options="column as column for column in getCommonMetricColumns(newMeasure)" >
                                  <option value="">-- Select a Column --</option>
                                </select>
                              </div>
                          </div>
                      </div>
                      <!--Return Type-->
                      <div class="form-group">
                          <div class="row">
                              <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Return Type</b></label>
                              <div class="col-xs-12 col-sm-6">
                                  <select class="form-control"
                                      ng-if="newMeasure.function.expression == 'COUNT_DISTINCT'"
                                      ng-init="newMeasure.function.returntype = (!!newMeasure.function.returntype)?newMeasure.function.returntype:cubeConfig.dftSelections.distinctDataType.value"
                                      chosen ng-model="newMeasure.function.returntype" required
                                      ng-options="ddt.value as ddt.name for ddt in cubeConfig.distinctDataTypes">
                                      <option value=""></option>
                                  </select>
                                <select class="form-control"
                                        ng-if="newMeasure.function.expression == 'TOP_N'"
                                        ng-init="newMeasure.function.returntype = (!!newMeasure.function.returntype)?newMeasure.function.returntype:cubeConfig.dftSelections.topN.value"
                                        chosen ng-model="newMeasure.function.returntype" required
                                        ng-options="ddt.value as ddt.name for ddt in cubeConfig.topNTypes">
                                  <option value=""></option>
                                </select>
                                  <span class="font-color-default"
                                        ng-if="newMeasure.function.expression != 'COUNT_DISTINCT' && newMeasure.function.expression != 'TOP_N'"
                                       ><b>&nbsp;&nbsp;{{newMeasure.function.returntype | uppercase}}</b>
                                  </span>
                              </div>
                          </div>
                      </div>
                      <!--Name-->
                      <div class="form-group">
                        <div class="row">
                          <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b></b></label>
                          <div class="col-xs-12 col-sm-6">
                            <table class="table table-hover table-bordered list" ng-if="nextParameters.length" ng-show="newMeasure.function.expression != 'TOP_N'">
                              <tr>
                                <th>Type</th>
                                <th>Value</th>
                                <th></td>
                              </tr>
                              <tr ng-repeat="n_parameter in nextParameters track by $index">
                                <td>{{n_parameter.type}}</td>
                                <td>{{n_parameter.value}}</td>
                                <td>
                                  <button class="btn btn-xs btn-info" ng-click="editNextParameter(n_parameter)">
                                    <i class="fa fa-pencil"></i>
                                  </button>
                                  <button class="btn btn-xs btn-info" ng-click="removeParameter(nextParameters, $index)"><i class="fa fa-minus"></i>
                                  </button>

                                </td>

                              </tr>
                            </table>

                            <table class="table table-hover table-bordered list" ng-if="nextParameters.length" ng-show="newMeasure.function.expression == 'TOP_N'">
                              <tr ng-repeat="n_parameter in nextParameters track by $index">
                                <td><b>Group By Column</b></td>
                                <td>{{n_parameter.value}}</td>
                                <td>
                                  <button class="btn btn-xs btn-info" ng-click="editNextParameter(n_parameter)">
                                    <i class="fa fa-pencil"></i>
                                  </button>
                                  <button class="btn btn-xs btn-info" ng-click="removeParameter(nextParameters, $index)"><i class="fa fa-minus"></i>
                                  </button>

                                </td>

                              </tr>
                            </table>


                            <button class="btn btn-sm btn-info" ng-click="addNextParameter()" ng-show="newMeasure.function.expression == 'TOP_N' && nextParameters.length==0"
                                    ng-show="state.mode=='edit'"><i class="fa fa-plus"> Group by Column</i>
                            </button>
                          </div>
                        </div>
                      </div>
              </div>

          </div>
      </div>
      <div class="box-footer">
          <button class="btn btn-sm btn-info" ng-disabled="edit_mes_form.$invalid"
                  ng-click="saveNewMeasure()" ng-show="state.mode=='edit'">OK</button>
          <button class="btn btn-link" ng-click="clearNewMeasure()">Cancel</button>
      </div>
  </div>
  </ng-form>
</div>




<script type="text/ng-template" id="nextParameter.html">
  <div class="modal-header">
    <h4 tooltip="submit" ng-if="newmea.measure&&newmea.measure.function.expression !== 'TOP_N'">Add Parameter</h4>
    <h4 tooltip="submit" ng-if="newmea.measure&&newmea.measure.function.expression == 'TOP_N'">Select Group By Column</h4>
  </div>
  <div class="modal-body" style="background-color: white">

    <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-8">
        <div class="row">
          <div class="form-group">
            <div class="row" ng-if="newmea.measure&&newmea.measure.function.expression !== 'TOP_N'">
              <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Param Type</b></label>
              <div class="col-xs-12 col-sm-6">
                <select class="form-control"
                        chosen ng-model="nextPara.type" required
                        ng-options="mpt as mpt for mpt in cubeConfig.measureParamType">
                  <option value=""></option>
                </select>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="col-md-2"></div>
    </div>
    <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-8">
        <div class="row">
          <div class="form-group">

            <div ng-if="newmea.measure&&newmea.measure.function.expression !== 'TOP_N'" class="row">
              <label  class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Param Value</b></label>
                <!--COUNT_DISTINCT-->
              <div class="col-xs-12 col-sm-6">
                <select class="form-control" chosen ng-if="nextPara.type !== 'constant'"
                        ng-model="nextPara.value"
                        ng-options="column as column for column in getCommonMetricColumns(newmea.measure)" >
                  <option value=""></option>
                </select>
               <span class="font-color-default"
                     ng-if="nextPara.type == 'constant'"
                     ng-init="nextPara.value = 1"><b>&nbsp;&nbsp;1</b></span>
              </div>
            </div>

            <div ng-if="newmea.measure&&newmea.measure.function.expression == 'TOP_N'" ng-init="nextPara.type='column'" class="row">
              <label  class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Group By Column</b></label>
              <!--COUNT_DISTINCT-->
              <div class="col-xs-12 col-sm-6">
                <select class="form-control" chosen
                        ng-model="nextPara.value"
                        ng-options="column as column for column in getCommonMetricColumns(newmea.measure)" >
                  <option value=""></option>
                </select>
              </div>
            </div>


            </div>
          </div>
        </div>
      </div>
      <div class="col-md-2"></div>
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn btn-success" ng-click="ok()">OK</button>
    <button class="btn btn-primary" ng-click="cancel()">Close</button>
  </div>
</script>
<script type="text/ng-template" id="expressionTip.html">
  <p>All cubes have to contain one measure for Count(1), suggest use "_Count_" as name (Has been generated automatically)</p>
</script>
<script type="text/ng-template" id="paramvalueTip.html">
  <ol>
    <li>Only accept single column in param value with "Column" type</li>
    <li>Distinct Count is approximate, please indicate Error Rate, higher accuracy degree accompanied with larger storage size and longer build time</li>
  </ol>
</script>
